<template>
  <div class="page-container">
    <el-space>
      <el-button type="primary" @click="addShowHandle">添加</el-button>
      <el-button type="danger" @click="delHandle(1)">批量删除</el-button>
    </el-space>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="id" width="100"></el-table-column>
      <el-table-column prop="name" label="昵称"></el-table-column>
      <el-table-column prop="phone" label="手机" width="380" />
      <el-table-column prop="wx_code" label="微信码" width="100">
        <template #default="scope">
          <img :src="scope.row.wx_code" class="cover" />
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === 1 ? 'primary' : 'danger'">{{
            scope.row.status === 1 ? '启用' : '禁用'
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-space>
            <el-button
              link
              type="primary"
              size="small"
              @click="editShowHandle(scope.row)"
              >修改</el-button
            >
            <el-button
              link
              type="danger"
              size="small"
              @click="delHandle(0, scope.row.id)"
              >删除</el-button
            >
          </el-space>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-24">
      <Pagination
        class="text-center"
        :page="pageForm.page"
        :limit="pageForm.limit"
        :total="tableTotal"
        @pagination="pageHandle"
      />
    </div>
    <el-dialog v-model="editShow" :title="editId ? '修改' : '添加'" width="700">
      <el-form ref="ruleFormRef" :model="form" label-width="auto">
        <el-form-item label="排序" prop="sort">
          <el-input v-model.number="form.sort" type="number" />
        </el-form-item>
        <el-form-item
          label="名字"
          prop="name"
          :rules="[{ required: true, message: '请输入名字' }]"
        >
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model.number="form.phone" />
        </el-form-item>
        <el-form-item label="微信码" prop="wx_code">
          <SingleImage v-model="form.wx_code"></SingleImage>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="2"
            active-text="启用"
            inactive-text="禁用"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editShow = false">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import Pagination from '@/components/Pagination';
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  apiServiceList,
  apiServiceDel,
  apiServiceAdd,
  apiServiceUpdate
} from '@/api/user';
import SingleImage from '@/components/Upload/SingleImage';
const tableData = ref([]);
const tableTotal = ref(0);
/**
 *
 * @param {*} isBatch 0不批量 1批量
 * @param {*} id 删除的id
 */
const delHandle = (isBatch = 0, id) => {
  if (isBatch === 1 && multipleSelection.value.length === 0) {
    ElMessage({
      type: 'error',
      message: '请先勾选操作项'
    });
    return;
  }
  ElMessageBox.confirm(
    `您确定要删除${isBatch === 0 ? '这条' : '所选'}记录吗?`,
    '删除提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      let params = {
        ids: [id]
      };
      if (isBatch === 1) {
        params.ids = multipleSelection.value.map((item) => item.id);
      }
      apiServiceDel(params).then((res) => {
        ElMessage({
          type: 'success',
          message: '删除成功'
        });
        getData();
      });
    })
    .catch(() => {});
};
/**
 * 表格勾选复选框
 */
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};
/**
 * 分页
 */
const pageForm = ref({
  page: 1,
  limit: 10
});
const pageHandle = (val) => {
  pageForm.value = val;
  getData();
};
// 获取表格数据
const getData = async () => {
  const { data, total } = await apiServiceList(pageForm.value);
  tableData.value = data;
  tableTotal.value = total;
};
onMounted(() => {
  getData();
});
// 添加、修改
const editId = ref('');
const editShow = ref(false);
const ruleFormRef = ref(null);
const initValues = {
  sort: 1,
  name: '',
  phone: '',
  wx_code: '',
  status: 1
};
const form = ref(initValues);
/**
 * 添加事件
 */
const addShowHandle = () => {
  editId.value = '';
  form.value = initValues;
  editShow.value = true;
};
/**
 * 修改事件
 */
const editShowHandle = (record) => {
  editId.value = record.id;
  editShow.value = true;
  form.value = JSON.parse(JSON.stringify(record));
};
// 添加/修改确定事件
const submitForm = (formEl) => {
  let api = editId.value ? apiServiceUpdate : apiServiceAdd;
  let params = form.value;
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      await api(params);
      ElMessage.success('操作成功');
      editShow.value = false;
      getData();
    } else {
      console.log('error submit!');
    }
  });
};
</script>

<style scoped>
.page-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
  padding: 16px;
  box-sizing: border-box;
}
.cover {
  height: 36px;
  width: 36px;
  border-radius: 6px;
}
</style>
